웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[자바스크립트] 드래그로 선택된 영역의 텍스트 바꾸기

Last Modified : 2020-11-17 / Created : 2015-04-29
13,870
View Count
자바스크립트를 사용하여 마우스로 드래그 한 경우 해당 텍스트, 문자열에 대하여 어떤 일을 수행하는 경우가 많더군요. 그래서 드래그한 부분을 변경하거나 앞 또는 뒤에 추가, 삭제 등등 여러가지 일을 할 수 있는 소스를 만들어봤습니다. 순수 자바스크립트로 작성하였으며 자세한 기능은 아래를 참고하세요.





# 자바스크립트로 드래그한 영역 가져오기, 삭제하기, 바꾸기

먼저 마우스로 특정 영역을 드래그한 후에 아래의 커맨드를 입력하면 해당 기능을 수행합니다. 어떤 기능이 있는지 알아보면...


  • TEXT로 가져오기 - wfSel.getTEXT()
  • HTML 코드로 가져오기 - wfSel.getHTML()
  • 특정 문자열, 태그 등을 추가하기 - wfSel.insert(before, after)
  • 해당 문자열을 바꾸기 - wfSel.replace(str)
  • 태그 삭제하기 - wfSel.removeTag()

매우 간단하게 사용가능합니다. 단순히 드래그 후 위와 같이 적용하면 되며 insert()의 경우 뭔가를 추가할 때 앞에 또는 뒤에만 넣을 수도 있습니다. 뒤에 넣을 경우 아래처럼 해보시기 바랍니다.


! 드래그 영역 문자나 HTML로 불러오기

가장 많이 사용될 부분입니다. 아래처럼 원하는 방식으로 선택하여 호출합니다.
wfSel.getTEXT();
wfSel.getHTML();

예를들어 안녕하세요의 녕하


! 뒤에만 엘리먼트 요소를 추가하기

이처럼 문자열 뿐만이 엘리먼트 등의 노드가 추가될 수 있습니다.
wfSel.insert('', '<span>abc</span>');


! 다른 문자로 치환, 바꾸기(html 가능)

드래그한 부분을 다른 텍스트 '123'으로 바꾼다면 아래처럼 사용합니다.
wfSel.replace('123');


! 태그를 삭제하는 기능

태그 삭제 기능 역시 추가하였습니다. 특별한 기능은 아니고 문자열로 반환하게 하여 텍스트만 가져와 보여주는 것 외에 다른 것은 없습니다.
wfSel.removeTag();



# 드래그 영역 조작하기 소스보기

실제 소스코드는 아래와 같습니다. wfSel 객체에 다양한 메소드를 추가하였습니다.

const wfSel = (() => {
  let sel, range, content, node;

  return {
    setVariables: () => {
      sel = window.getSelection();
      if (!sel) return;
      // Set variables
      range = sel.getRangeAt(0);
      content = range.cloneContents();
      node = document.createElement('span');
    },
    getTEXT() {
      this.setVariables();
      return sel.toString();
    },
    getHTML() {
      this.setVariables();
      const span = document.createElement('span');
      span.appendChild(content);
      return span.innerHTML;
    },
    insert(before, after) {
      before = before || '';
      after = after || '';
      this.replace(before + wfSel.getHTML() + after);
    },
    replace(text) {
      this.setVariables();
      node.innerHTML = text;
      range.deleteContents();
      range.insertNode(node.childNodes[0]);
    },
    removeTag: function() {
      this.replace(wfSel.getTEXT());
    }
  }
})();




! 참고사항
위 코드는 window 객체에 getSelection()이 있는 경우에 정상적으로 작동합니다. webkit 엔진의 브라우저는 정상적으로 잘 동작하나 이를 지원하지 않는경우 정상동작하지 않을 수 있습니다. 이는 필요한 경우 나중에 추가하여 크로스브라우징 하도록 하겠습니다.
드래그 caret getSelection
아래의 글도 찾고 계시지 않나요?

Previous

[제이쿼리] 자식 요소 선택방법 및 찾기, children()

Previous

[제이쿼리] 서서히 보이게 하기, 사라지게 하기, fadeIn(), fadeOut()